<template lang="html">
  <div class="game_build">
    <!-- <header-top :option="headerOption"></header-top> -->
    <action-bar title='创建比赛' :style='{backgroundColor: "#e54f20"}'>
      <template slot='left'>
        <action-button @click='onBack' color='#fff'>
          <i class="iconfont icon-fanhui"></i>
        </action-button>
      </template>
      <template slot='right'>
        <action-button color='transparent'>
        </action-button>
      </template>
    </action-bar>
    <div class="game_build">
      <div class="game-build">
        <div class="game-build_header">
          <div class='item'>
            <span><i class='iconfont icon-yuanbao'></i></span>
            <div>
              预计奖池积累
              <div class='value'><span>{{gameAmount}}</span>君元宝</div>
            </div>
          </div>
          <div class='item'>
            <span><i class='iconfont icon-zuanshi'></i></span>
            <div>
              创建这所需贡献积分
              <div class='value'><span>{{createrDeduct}}</span>君元宝</div>
            </div>
          </div>
            <div class="header_right" style="display:none;">
                <div>创建者所需贡献积分: <span class="create-deduct">{{createrDeduct}}</span> 君元宝</div>
                <div>预计奖池积累：<span class="game-amount">{{gameAmount}}</span> 君元宝</div>
            </div>
        </div>

        <div class="basic">
            <div class="basic_header"><div class="line_vert"></div>比赛基本设置</div>
            <div class="line_horiz"></div>
            <div class="name" id="game-name">
                <span>比赛名称</span>
                <input ref="name_value" class="name_value" type="text" placeholder="请输入比赛名称" v-model='gameName'/>
            </div>
            <div class="line_horiz"></div>
            <div class="init-money">
                <span>初始资本</span>
                <popup-picker  class="init-money_value-wrap" :data="initmoney.data" v-on:change="onInitMoneyChange" :value='initmoney.value' @onScroll='onInitMoneyChange'>
                  <span id="init-money_value-wrap_value" class="init-money_value-wrap_value">{{initmoney.data[0][initmoney.index].name}}</span>
                  <i class="iconfont">&#xe62d;</i>
                </popup-picker>
            </div>
            <div class="line_horiz"></div>
            <div class="integral">
                <span>每个参赛人需扣君元宝</span>
                <input id="integral_value" class="integral_value" type="number" v-model='integral'/>
            </div>
            <div class="warn-wrap">
                <span class="tip">注：每个参赛人可扣君元宝为0-1000个</span>
                <span class="warn" id="integral_value_warn"></span>
            </div>
            <div class="line_horiz"></div>
            <div class="player-limit">
                <span>比赛人数</span>
                <popup-picker  class="player-limit_value-wrap" :data="playerData.data" v-on:change="onPlayerChange" :value='playerData.value' @onScroll='onPlayerChange'>
                  <span id="init-money_value-wrap_value" class="player-limit_value-wrap_value">{{playerData.data[0][playerData.index].name}}</span>
                  <i class="iconfont">&#xe62d;</i>
                </popup-picker>
            </div>
            <div class="line_horiz"></div>
            <div class="game-date" id="game-date">
                <span>比赛时间</span>
                <span class="game-date-wrap">
                    <popup-picker  class="game-date_start-date-wrap" :data="playDateStart.data" :value='playDateStart.value' @onScroll='onPlayDStartScroll'>
                      <span class="game-date_start-date_value" v-text='playDateStart.value[0] + "." + playDateStart.value[1] + "." +playDateStart.value[2]'></span>
                      <i class="iconfont">&#xe62d;</i>
                    </popup-picker>
                    -
                    <popup-picker  class="game-date_end-date-wrap" :data="playDateEnd.data" :value='playDateEnd.value' @onScroll='onPlayDEndScroll'>
                      <span class="game-date_end-date_value" v-text='playDateEnd.value[0] + "." + playDateEnd.value[1] + "." +playDateEnd.value[2]'></span>
                      <i class="iconfont">&#xe62d;</i>
                    </popup-picker>
                </span>
            </div>
            <div class="warn-wrap">
                <span class="tip">注：比赛时间可设定在3-30天</span>
                <span class="warn" id="game-date_warn"></span>
            </div>
        </div>

        <div class="limit">
            <div class="limit_header">
                <span>参赛限定设置</span>
                <span class="tip">*以下选项非必须</span>
            </div>
            <div class="password-wrap">
                <div class="password_switch-wrap">
                    <span>参赛口令</span>
                    <span class="password_switch" @click="listenerPasswordBtn">
                        <div class="password_switch_btn" :class="[hasPassword ? 'hasPassword': 'noPassword']"></div>
                    </span>
                    <div class="password_tip">设置参赛口令可限定知道口令的人员参加</div>
                </div>
                <div class="line_horiz"></div>
                <div class="password_value-wrap" v-show="hasPassword">
                    <div>输入参赛口令</div>
                    <div class='inputPWD'>
                      <input class="gamePWD"  type="text" placeholder="10位以内数字、字母" maxlength="10" size="18" v-model='gamePWD'/>
                    </div>
                </div>
                <div class="line_horiz"></div>
            </div>
        </div>

        <div class="build-game-btn" id="build-game-btn" @click="buildGame">发布比赛并邀请好友来参加</div>

      </div>
    </div>

    <game-build-fail-modal></game-build-fail-modal>
    <game-name-format-modal></game-name-format-modal>
    <game-fee-high-modal></game-fee-high-modal>
    <game-pwd-format-modal></game-pwd-format-modal>
    <game-all-fighting-modal></game-all-fighting-modal>
    <game-name-same-modal></game-name-same-modal>
    <game-build-fail-modal></game-build-fail-modal>
    <game-delete-modal></game-delete-modal>
    <game-not-login-modal></game-not-login-modal>
    <game-not-start-modal></game-not-start-modal>
    <game-pwd-input-modal></game-pwd-input-modal>
    <game-register-succ-modal></game-register-succ-modal>
  </div>
</template>

<script>
import HeaderTop from 'components/HeaderTop'
import ActionBar from 'components/actionBar'
import ActionButton from 'components/actionBar/ActionButton'
import CommonUtil from 'common/common.util'
import Constant from 'common/constant'
import LocalDAO from 'common/localDAO'
import RemoteDAO from 'common/remoteDAO'
import PopupPicker from 'components/popup-picker'
import GameAllFightingModal from 'components/modal/GameAllFightingModal'
import GameBuildFailModal from 'components/modal/GameBuildFailModal'
import GameFeeHighModal from 'components/modal/GameFeeHighModal'
import GameNameFormatModal from 'components/modal/GameNameFormatModal'
import GameNameSameModal from 'components/modal/GameNameSameModal'
import GamePwdFormatModal from 'components/modal/GamePwdFormatModal'
import GameDeleteModal from 'components/modal/GameDeleteModal'
import GameNotLoginModal from 'components/modal/GameNotLoginModal'
import GameNotStartModal from 'components/modal/GameNotStartModal'
import GamePwdInputModal from  'components/modal/GamePwdInputModal'
import GameRegisterSuccModal from 'components/modal/GameRegisterSuccModal'

export default {
  components: {
    ActionBar, ActionButton,
    'game-all-fighting-modal':GameAllFightingModal,
    'game-build-fail-modal':GameBuildFailModal,
    'game-fee-high-modal':GameFeeHighModal,
    'game-name-format-modal':GameNameFormatModal,
    'game-name-same-modal':GameNameSameModal,
    'game-pwd-format-modal':GamePwdFormatModal,
    'game-delete-modal':GameDeleteModal,
    'game-not-login-modal':GameNotLoginModal,
    'game-not-start-modal':GameNotStartModal,
    'game-pwd-input-modal':GamePwdInputModal,
    'game-register-succ-modal':GameRegisterSuccModal,
    'popup-picker':PopupPicker,
  },
  data () {
    return {
      hasPassword: false,
      createrDeduct: 800,
      integral: 10, //每个参赛人需扣君元宝数量
      gameName:'',
      _userCode:'',
      canBuild: true,
      oneD: 86400000,
      twoD: 172800000,
      threeD: 259200000,
      sevenD: 604800000,
      thirthD: 2592000000,
      maxY: 5,//从今往后最多年数
      years:[],
      months: [],
      days: [],
      weeks: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
      jbdYearIndex: 0,
      jbdMonthIndex: 0,
      jbdDayIndex: 0,
      jedYearIndex: 0,
      jedMonthIndex: 0,
      jedDayIndex: 0,
      bdYearIndex: 0,
      bdMonthIndex: 0,
      bdDayIndex: 0,
      edYearIndex: 0,
      edMonthIndex: 0,
      edDayIndex: 0,

      headerOption: {
        title: '创建比赛',
        leftBtn: Constant.leftBtn.BACK,
        operations: []
      },
      message:'',
      gamePWD:"",
      initmoney:{
        data:[
          [{name:'每个参赛人10万元初始资本',value:'10'},{name:'每个参赛人50万元初始资本',value:'50'},{name:'每个参赛人100万元初始资本',value:'100'}]
        ],
        index:0,
        value:['10']
      },
      playerData:{
        data:[
          [{name:'4人赛 需200君元宝',value: '4'},{name:'8人赛 需800君元宝',value:'8'},{name:'12人赛 需1200君元宝', value:'12'},{name:'60人赛 需6000君元宝',value:'60'},{name:'100人赛 需10000君元宝', value:'100'}]
        ],
        index:1,
        value:['8']
      },
      playDateStart:{
        data:[
          [{name: '2017年',value:'2017'},{name:'2018年',value:'2018'}],
          [{name: '1月',value:'1'},{name:'2月', value: '02'}],
          [{name: '1日 星期六', value: '1'},{name: '2日 星期日', value: '02'}]
        ],
        value:['2018','02','02']
      },
      playDateEnd:{
        data:[
          [{name: '2017年',value:'2017'},{name:'2018年',value:'2018'}],
          [{name: '1月',value:'1'},{name:'2月', value: '02'}],
          [{name: '1日 星期六', value: '1'},{name: '2日 星期日', value: '02'}]
        ],
        value:['2018','02','02']
      }
    }
  },
  created () {
    this._userCode = LocalDAO.getUserCode() ? LocalDAO.getUserCode() : '';
    this.initEvent();
  },
  computed:{
    gameAmount: function () {
      if(this.integral == ''){this.$store.dispatch('setTip',{text:"请输入每个参赛人需扣君元宝数量"}); return;}
      if(isNaN(this.integral)) {this.$store.dispatch('setTip',{text:"每个参赛人需扣君元宝应为数字"}); return;}
      if (this.integral < 0 || this.integral > 1000) { this.$store.dispatch('setTip', {text: '每个参赛人可扣君元宝为0-1000个'}); this.integral = 1000; return;}
      if(this.playerData.value[0] == '4') {
        this.createrDeduct = 200;
        return this.createrDeduct + this.integral * 3;
      }else{
        let num = parseInt(this.playerData.value[0]);
        this.createrDeduct = num * 100;
        return this.createrDeduct + this.integral * (num - 1);
      }
    },
  },
  methods: {
    onBack () {
      this.$router.go(-1)
    },
    initEvent: function() {
      this.initPicker();
      this.maidian("8001");
      // this.couldBuildGame();
      this.showLoading(false);
    },
    /*
    * 用户修改日期，动态变动其他日期：
    *   当用户选择了一个报名开始时间后，报名时间的截止时间应自动延后两个工作日。
    *   比赛开始时间应在报名截止日期后自动延期1个工作日，比赛结束日期应在比赛开始日期后自动延后3个工作日。
    *   如用户自己调节导致的打乱，则前端不再做自动处理，按照现有规则提示他即可
    * 比赛开始／结束时间避开周末
    */
    initPicker: function () {
      let today = new Date();
      let year =today.getFullYear();
      let month = today.getMonth();
      let day = today.getDate();
      let i;
      for(i=0; i< this.maxY; i++){
        let tempY = year + i;
        this.years.push({name: tempY+'年',value: tempY +''});
      }

      for(i=0;i<12;i++){
        this.months.push({name: i+1 + '月',value: i<9? '0'+(i+1): i+1+''});
      }
      let dayIndex = today.getDate() - 1;
      //报名开始日期
      this.playDateStart.data = [this.years, this.months, this.getDays(year, month)];
      this.playDateStart.value = [
        this.playDateStart.data[0][0].value,
        this.playDateStart.data[1][month].value,
        this.playDateStart.data[2][dayIndex].value
      ]
      this.autoSetDate();
    },
    /*
    * 用户修改日期，动态变动其他日期：
    *   当用户选择了一个报名开始时间后，报名时间的截止时间应自动延后两个工作日。
    *   比赛开始时间应在报名截止日期后自动延期1个工作日，比赛结束日期应在比赛开始日期后自动延后3个工作日。
    *   如用户自己调节导致的打乱，则前端不再做自动处理，按照现有规则提示他即可
    * 比赛开始／结束时间避开周末
    */
    autoSetDate: function () {
      let year = parseInt(this.playDateStart.value[0]);
      //比赛开始日期,避开周末
      let playStartDate = new Date(year, parseInt(this.playDateStart.value[1]) - 1, parseInt(this.playDateStart.value[2]))
      switch(playStartDate.getDay()){
        case 0:
          playStartDate = new Date(playStartDate.getTime() + this.oneD );
          break;
        case 6:
          playStartDate = new Date(playStartDate.getTime() + this.twoD );
          break;
      }
      this.playDateStart.data = [this.years, this.months, this.getDays(playStartDate.getFullYear(), playStartDate.getMonth())];
      this.playDateStart.value = [
        this.playDateStart.data[0][playStartDate.getFullYear() > year ? 1 : 0].value,
        this.playDateStart.data[1][playStartDate.getMonth()].value,
        this.playDateStart.data[2][playStartDate.getDate() - 1].value
      ];
      //比赛结束日期
      let playEndDate = new Date(playStartDate.getTime() + this.threeD );
      switch(playEndDate.getDay()){
        case 0:
          playEndDate = new Date(playEndDate.getTime() + this.oneD );
          break;
        case 6:
          playEndDate = new Date(playEndDate.getTime() + this.twoD );
          break;
      }
      this.playDateEnd.data = [this.years, this.months, this.getDays(playEndDate.getFullYear(), playEndDate.getMonth())];
      this.playDateEnd.value = [
        this.playDateEnd.data[0][playEndDate.getFullYear() > year ? 1 : 0].value,
        this.playDateEnd.data[1][playEndDate.getMonth()].value,
        this.playDateEnd.data[2][playEndDate.getDate() - 1].value
      ]
    },

    getDays: function (year,month){
      year = parseInt(year);
      month = parseInt(month);
      let isRN = 0;
      if((year%4 == 0 && year%100 != 0) || (year%400 == 0)) isRN = 1;
      let monthsDay = [31, 28+isRN, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
      let days = [], tempToday = new Date(year, month);
      for(let i=0; i<monthsDay[month];i++){
        tempToday.setDate(i+1);
        days.push({name: i+1+' '+ this.weeks[tempToday.getDay()], value: (i+1) < 10 ? '0'+(i+1):i+1+''});
      }
      return days;
    },
    /*
    * 初始资本选择框回调时间
     */
    onInitMoneyChange: function (val) {
      let index = this.getIndexOf(this.initmoney.data[0],val);
      this.initmoney.index = index;
      this.initmoney.value[0] = val;
    },

    /*
    * 比赛人数选择框回调事件
     */
    onPlayerChange: function (val) {
      let index = this.getIndexOf(this.playerData.data[0],val);
      this.playerData.index = index;
      this.playerData.value[0] = val;
      if(this.playerData.value[0] == '4') this.createrDeduct = 200;
      else this.createrDeduct = parseInt(this.playerData.value[0]) * 100;
    },

    onPlayDStartScroll: function (val){
      this.playDateStart.data = [this.years, this.months, this.getDays(val[0], (parseInt(val[1]) - 1))];
      this.playDateStart.value = val;
      this.autoSetDate();
    },

    onPlayDEndScroll: function (val){
      this.playDateEnd.data = [this.years, this.months, this.getDays(val[0], (parseInt(val[1]) - 1))];
      this.playDateEnd.value = val;
    },
    /*
    * 从数组中获取元素位置
     */
    getIndexOf: function (arr,item) {
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].value == item) {
          return i;
        }
      }
      return -1;
    },

    /*
    *   发布比赛点击事件
     */
    createGame: function () {
      if(this.canBuild){
        this.maidian("8002");
        this.getUserCode();
      }
    },

    /**
     * 埋点
     * @param id    事件ID
     */
    maidian: function (id) {
      if(TDAPP != undefined){
        let kv = {"usercode":LocalDAO.getUserCode()};
        TDAPP.onEvent(id,"",kv);
        TDAPP.send();
      }
    },

    /*
      *   获取usercode
     */
    getUserCode: function () {
        let self = this;
        let nickName = LocalDAO.getNickname();
        if(nickName == undefined || nickName == null || nickName.length <= 0){
            // RemoteDAO.callNativeLogin(function (response) {
            //     if(response.data.registerFlag == "1"){
            //         self.maidian(2006);
            //     }
            //     let userCode = response.data.user_code;
            //     let nickName = response.data.nick_name;
            //     LocalDAO.setUserCode(userCode);
            //     LocalDAO.setNickname(nickName);
            //     self._userCode = userCode;
            //     self.buildGame();
            // })
            console.warn('not allow to build game: nickName is '+nickName);
        }else{
            self._userCode =  LocalDAO.getUserCode();
            self.buildGame();
        }
    },

    /**
     * 控制邀请码的显示与隐藏
     */
    listenerPasswordBtn: function () {
      this.hasPassword = !this.hasPassword;
    },

    /**
    *检查用户的所有比赛（包括创建和参加的）是否超过了3个比赛
    *userCode, ACTION_FLAG, PAGE_SIZE, PAGE_NO, totalFlag, gameKind, callback
    */
    couldBuildGame: function () {
      this.canBuild = false;
      this.showLoading(true)
      let params = {
        userCode: this._userCode,
        actionFlag: '0',
        pageSize: '100',
        pageNo: '1',
        totalFlag: '',
        gameKind: '',
        gameID: ''
      }
      RemoteDAO.callUC12008303(params, response => {
        if(response.error == '0'){
            let counter = 0;
            for( let i=0;i < response.data.body.length; i++){
                if(this.isGameValid(response.data.body[i])) counter ++;
                if(counter >= 3) break;
            }
            if(counter >= 3){
              let reason = '您参加和创建的比赛个数之和已超过3个，不能创建比赛了';
              this.gameBuildFailModal(reason, 1);
            }
        }else{
            console.error('Server ERROR, the response is ', response);
        }
        this.canBuild = true;
        this.showLoading(false);
      });
    },

    /*
     *  结束和无效的比赛
     */
    isGameValid: function (game) {
        if(game.GAME_STEP == '4' || game.GAME_STEP == '5'){
            return false;
        }
        return true;
    },

    /**
     * 判断字符串是否为中文,字母或数字
     * @param str
     */
    isChinese: function (str) {
        let re = /^[A-Za-z0-9\u4e00-\u9fa5]+$/;
        if(re.test(str)) return true;
        return false;
    },

    /**
     * 参赛口令是否为数字和字符
     * @param pwd
     */
    isRightPWD: function (pwd) {
        let b = /^[0-9a-zA-Z]*$/g;
        return b.test(pwd);
    },

    /**
     *创建比赛
     */
    buildGame: function () {
        //比赛名
        this.showLoading(true);
        if(this.gameName == undefined || this.gameName.length == 0){
            this.showLoading(false);
            this.canBuild = true;
            this.$store.dispatch('setTip',{text:"比赛名称不能为空"});
            return;
        }
        if( !this.isChinese(this.gameName)|| this.gameName.length > 10){
            this.showLoading(false);
            this.canBuild = true;
            this.gameNameFormatModal();
            return;
        }

        //选择初始资金
        let gameAmount = this.gameAmount;
        let joinInitAmount = this.initmoney.value * 10000;

        //每个参赛人需扣君元宝
        let joinGameAmount = this.integral;
        if(joinGameAmount === undefined || joinGameAmount == null || joinGameAmount.length == 0){
            this.showLoading(false);
            this.canBuild = true;
            this.$store.dispatch('setTip',{text:"请输入每个参赛人需扣君元宝数"});
            return;
        }
        if(isNaN(joinGameAmount)){
            this.showLoading(false);
            this.canBuild = true;
            this.$store.dispatch('setTip',{text:"君元宝数量必须为数字"});
            return;
        }
        if(joinGameAmount > 1000){
            this.showLoading(false);
            this.canBuild = true;
            this.gameFeeHighModal();
            return;
        }

        //比赛人数上限
        let gameMaxLimit = this.playerData.value;

        if(!this.isDateOK()) {
          this.showLoading(false);
          return;//日期不对
        }
        //比赛口令
        let gamePWD = "";
        if(this.hasPassword){
            gamePWD = this.gamePWD;
            if(!this.listenGamePWD()) {
                this.showLoading(false);
                this.canBuild = true;
                return;
            }
        }
        if(this._userCode == undefined || this._userCode == null || this._userCode.length ==0){
            this.showLoading(false);
            this.canBuild = true;
            this.gameBuildFailModal('用户代码为:' + this._userCode);
            return false;
        }

        let beginDate = this.playDateStart.value[0] + this.playDateStart.value[1] +this.playDateStart.value[2];
        let endDate = this.playDateEnd.value[0] + this.playDateEnd.value[1] +this.playDateEnd.value[2];

        let nickName = LocalDAO.getNickname();
        let userHead = LocalDAO.getUserHead()

        RemoteDAO.callUC12008307((data) => {
          this.showLoading(false);
          if ( data.error == "1"){
                    if(data.data == "比赛已经存在"){
                        console.info('比赛已经存在');
                        this.gameNameSameModal();
                    }else{
                        this.gameBuildFailModal(data.data);
                    }
                }else {
                    let result = decrypt.json2(data.data);
                    let object = JSON.parse(result);
                    let gameId = object.body[0].GAME_ID;
                    let createrHead = LocalDAO.getUserHead();
                    //跳转创建比赛成功页携带参数：gameId gameKind  createrNickName nickName gameAmount beginDate endDate gameNeedAmount joinGameAmount gameName gamePWD createrHead
                    this.$router.push({path: '/game/succ',query:{gameId:gameId,gameKind:0,createrNickName:nickName,gameAmount:gameAmount,beginDate:beginDate,endDate:endDate,gameNeedAmount:joinGameAmount,gameName:this.gameName,gamePWD:gamePWD,createrHead:createrHead}});

                }
                this.canBuild = true;
        }, this._userCode, "",this.gameName, joinInitAmount, "P", 0, '', '',
            beginDate, endDate, gameAmount, joinGameAmount,gameMaxLimit, this.gamePWD, "", "", "",
            "", "", nickName, userHead)
    },
    /*判断比赛日期是否正确*/
    isDateOK: function (){
      // 比赛时间
      let today = new Date();
      today.setHours(0,0,0,0)
      let beginDate = new Date(parseInt(this.playDateStart.value[0]), parseInt(this.playDateStart.value[1]) - 1, parseInt(this.playDateStart.value[2]));
      let endDate = new Date(parseInt(this.playDateEnd.value[0]), parseInt(this.playDateEnd.value[1]) - 1, parseInt(this.playDateEnd.value[2]));
      if(endDate.getTime() < beginDate.getTime()){
        this.$store.dispatch('setTip', {text:'比赛开始日期应在比赛结束日期之前'});
        return false;
      }
      let bdd = beginDate.getDay();
      let edd = endDate.getDay();
      if(bdd == 0 || bdd == 6) {
          this.$store.dispatch('setTip', {text:'比赛开始日期不能在周末'})
          return false;
      }
      if(edd == 0 || edd == 6) {
          this.$store.dispatch('setTip', {text:'比赛结束日期不能在周末'})
          return false;
      }
      return true;
    },

    isWeekend: function (y, m, d) {
      let tD = new Date(y,m,d);
      let day = tD.getDay();
      if(day == 0 || day == 6) return true;
      return false;
    },
    /**
     *监听比赛口令
     */
    listenGamePWD: function () {
        let self = this;
        //参赛口令
        let gamePWD =this.gamePWD;
        if( gamePWD.length >0 && !self.isRightPWD(gamePWD)){
            console.warn("参赛口令必须为数字＋字符");
            self.gamePwdFormatModal();
            return false;
        }
        return true;
    },

    /*
    * loading
     */
    showLoading: function (show) {
        if(show){
          this.$store.dispatch('setLoading', {visible: true});
        }else{
          this.$store.dispatch('setLoading', {visible: false});
        }
    },

    /*
      *   弹窗提示
     */
    gameBuildFailModal(reason, once){
      if(!once) once = 0;
      this.$store.dispatch('setModal', {visible: true, modalId: 'gameBuildFailModal',reason:reason, once});
    },
    gameNameFormatModal(){
      this.$store.dispatch('setModal', {visible: true, modalId: 'gameNameFormatModal'});
    },
    gameFeeHighModal(){
      this.$store.dispatch('setModal', {visible: true, modalId: 'gameFeeHighModal'});
    },
    gameAllFightingModal(){
      this.$store.dispatch('setModal', {visible: true, modalId: 'gameAllFightingModal'});
    },
    gameNameSameModal(){
      this.$store.dispatch('setModal', {visible: true, modalId: 'gameNameSameModal'});
    },
    gamePwdFormatModal(){
      this.$store.dispatch('setModal', {visible: true ,modalId: 'gamePwdFormatModal'});
    },
    gameDeleteModal(){
      this.$store.dispatch('setModal', {visible: true, modalId: 'gameDeleteModal'});
    },
    gameNotLoginModal(){
      this.$store.dispatch('setModal', {visible: true, modalId: 'gameNotLoginModal'});
    },
    gameNotStartModal(){
      this.$store.dispatch('setModal', {visible: true, modalId: 'gameNotStartModal'});
    },
    gamePwdInputModal(){
      //gameId 比赛id   createrUser:要参赛人的Id
      this.$store.dispatch('setModal', {visible: true, modalId: 'gamePwdInputModal',gameId:'',createUser:''});
    },
    gameRegisterSuccModal(){
      this.$store.dispatch('setModal', {visible: true, modalId: 'gameRegisterSuccModal'});
    },

  },
  destroyed(){
    this.$store.dispatch('setLoading', {visible: false});
  }
}
</script>

<style lang="less" scoped>
  /*创建比赛*/
  .game_build .game-build{
      background-color: rgba(254, 255,255, 1);
      color: #999999;
      overflow: auto;
  }
  .game_build .game-build .game-build_header{
      padding: 20px 0;
      text-align: center;
      color:#fff;
      height: 90px;
      background-color: #f7743a;
      font-size: 16px;
      display: flex;
  }
  .game-build_header .item{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    text-align: left;
    i{
      background-color: #dc5326;
      border-radius: 50%;
      font-size: 20px;
      color: #ff9a6d;
      padding: 3px;
      margin-right: 10px;
    }
    .value{
      font-size: 15px;
      font-weight: bold;
    }
  }
  .game_build .game-build .header_left{
      display: inline-block;
      width: 38px;
      vertical-align: middle;
      margin-top: -3px;
  }

  .game_build .game-build .header_right{
      display: inline-block;
      text-align: left;
      vertical-align: middle;
      margin-left:10px ;
  }
  .game_build .game-build .header_right .game-amount{
      color: #fdee4a;
  }
  .game_build .line_horiz{
      width: 98%;
      background-color: rgba(248, 249, 250, 1);
      height: 1px;
      margin: 10px auto;
  }

  .game_build .warn-wrap{
      display: -ms-inline-flexbox;
      display: -webkit-inline-box;
      display: inline-flex;
  }

  .game_build .warn-wrap .warn{
      margin: 2px 10px;
      font-size: 1rem;
      color: red;
      float: right;
  }

  .game_build .wave img{
      width: 100%;
      height: 40px;
  }

  .game_build .basic .basic_header{
      line-height: 15px;
      font-size: 15px;
      margin: 8px 10px auto 10px;
      color: #565656;
  }
  .game_build .basic .line_vert{
      background-color: #f7743a;
      width: 3px;
      height: 13px;
      display: inline-block;
      vertical-align: top;
      margin-right: 4px;
      border-radius: 2px;
  }
  .game_build .basic .name{
      margin: 15px 10px 15px 20px;
      height: 30px;
      font-size: 14px;
  }
  .game_build .basic .name span{
      line-height: 30px;
  }
  .game_build .basic .name input{
      color: #565656;
      float: right;
      border: solid 1px #D8D8D8;
      padding: 4px;
      border-radius: 3px;
      width: 205px;
  }
  .game_build .basic .init-money{
      margin: 15px 10px 15px 20px;
      height: 30px;
      font-size: 14px;
  }
  .game_build .basic .init-money i{
      color: white;
      height: 100%;
      width: 30px;
      padding: 8px;
      font-size: 14px;
      border-radius: 2px;
      background-color: rgba(95, 170, 232, 1);
  }
  .game_build .basic .init-money span{
      line-height: 30px;
  }
  .game_build .basic .init-money .init-money_value-wrap{
      color: #565656;
      float: right;
      border: solid 1px #D8D8D8;
      /* padding: 4px; */
      border-radius: 3px;
  }
  .game_build .basic .init-money .init-money_value-wrap input{
      padding: 0;
      border: 0;
  }
  .game_build .basic .integral{
      margin: 15px 10px 2px 20px;
      height: 30px;
      font-size: 14px;
      line-height: 30px;
  }
  .game_build .basic .integral_value{
      float: right;
      border: solid 1px #D8D8D8;
      line-height: 28px;
      height: 30px;
      border-radius: 3px;
      color: #565656;
  }
  .game_build .basic .player-limit{
      margin: 15px 10px 2px 20px;
      height: 30px;
      font-size: 14px;
      line-height: 30px;
  }
  .game_build .basic .player-limit_value-wrap{
      color: #565656;
      float: right;
      border: solid 1px #D8D8D8;
      /* padding: 4px; */
      border-radius: 3px;
  }
  .game_build .basic .player-limit_value-wrap input{
      border: 0;
      padding: 0;
  }
  .game_build .basic .player-limit_value-wrap i{
      color: white;
      height: 100%;
      width: 30px;
      padding: 8px;
      font-size: 14px;
      border-radius: 2px;
      background-color: rgba(95, 170, 232, 1);
  }
.register-date{
      margin: 15px 10px 0 20px;
      height: 30px;
      font-size: 14px;
      line-height: 30px;
  }
.register-date-wrap{
      float: right;
      text-align: center;
}

.register-date_start-date-wrap{
      color: #565656;
      border: solid 1px #D8D8D8;
      /* padding: 4px; */
      border-radius: 3px;
      display: inline-block;
      min-width: 109px;
  }
 .register-date_start-date-wrap i{
      color: white;
      font-size: 14px;
      border-radius: 2px;
      background-color: rgba(95, 170, 232, 1);
      float: right;
      padding: 0 8px;
  }
.register-date_end-date-wrap{
      color: #565656;
      border: solid 1px #D8D8D8;
      /* padding: 4px; */
      border-radius: 3px;
      display: inline-block;
      min-width: 109px;
  }
.register-date_end-date-wrap i{
      color: white;
      font-size: 14px;
      border-radius: 2px;
      background-color: rgba(95, 170, 232, 1);
      float: right;
      padding: 0 8px;
  }

.game-date{
      margin: 15px 10px 0 20px;
      height: 30px;
      font-size: 14px;
      line-height: 30px;
  }
  .game_build .basic .game-date-wrap{
      float: right;
      text-align: center;
  }


  .game_build .basic .tip{
      margin: 2px 10px 2px 20px;
      font-size: 1rem;
      color: #BABABA;
  }
  .game_build .basic .game-date_start-date-wrap{
      color: #565656;
      border: solid 1px #D8D8D8;
      /* padding: 4px; */
      border-radius: 3px;
      display: inline-block;
      min-width: 109px;
  }
  .game_build .basic .game-date_start-date-wrap i{
      color: white;
      font-size: 14px;
      border-radius: 2px;
      background-color: rgba(95, 170, 232, 1);
      float: right;
      padding: 0 8px;
  }
  .game_build .basic .game-date_end-date-wrap{
      color: #565656;
      border: solid 1px #D8D8D8;
      /* padding: 4px; */
      border-radius: 3px;
      display: inline-block;
      min-width: 109px;
  }
  .game_build .basic .game-date_end-date-wrap i{
      color: white;
      font-size: 14px;
      border-radius: 2px;
      background-color: rgba(95, 170, 232, 1);
      float: right;
      padding: 0 8px;
  }
  .game_build .limit .limit_header{
      background-color: #f1f3f6;
      padding: 15px 10px 15px 20px;
      border-bottom: solid 1px #e7e7e7;
  }
  .game_build .limit .limit_header .tip{
      float: right;
      font-size: 12px;
  }
  .game_build .limit .password_switch-wrap{
      margin: 15px 10px 15px 20px;
  }
  .game_build .limit .password_switch-wrap .password_tip{
      color: #6BB3EB;
      font-size: 10px;
  }
  .game_build .limit .password_value-wrap{
      margin: 15px 10px 15px 20px;
      display: flex;
      align-items: center;
      height: 30px;
      line-height: 30px;
      .inputPWD{
        flex: 1;
        margin-left: 20px; 
      }
  }
  .game_build .limit .password_value-wrap input{
      border: solid 1px #D8D8D8;
      float: left;
      border-radius: 3px;
      line-height: 30px;
      height: 30px;
      width: 100%;
  }
  .game_build .limit .password_switch{
      float: right;
      width: 50px;
      border: solid 1px #D8D8D8;
      height: 25px;
      border-radius: 3px;
      position: relative;
      display: flex;
      align-items: center;
  }
  .game_build .limit .password_switch_btn{
      width: 25px;
      height: 21px;
      border-radius: 2px;
      background-color: #D8D8D8;
      position: absolute;
      left: 0;
      -webkit-transition: left 100ms, background-color 100ms;
              transition: left 100ms, background-color 100ms;
  }

  .game_build .limit .password_switch_btn.noPassword{
    left: 0px;
    background-color: darkgrey;
  }

  .game_build .limit .password_switch_btn.hasPassword{
    left: 24px;
    background-color: #6BB3EB;
  }

  .game_build .build-game-btn{
      background-color: #FF5760;
      color: white;
      width: 80%;
      padding: 8px 0;
      border-radius: 5px;
      text-align: center;
      margin: 22px auto;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      overflow: hidden;
  }
  .game_build .build_loading-wrap{
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 10;
      background-color: rgba(0,0,0, 0.3);
      padding-top: 50%;
      color: #FFFFFF;
      display: none;
      text-align: center;
  }
  /* 加载的动画 */
  .game_build .build_loading-wrap .build_loading{
      -webkit-animation: buildLoading 1s linear 0s infinite ;
              animation: buildLoading 1s linear 0s infinite ;
      text-align: center;
  }
  @-webkit-keyframes buildLoading {
      0% {-webkit-transform: rotate(0deg);transform: rotate(0deg)}
      100% {-webkit-transform: rotate(360deg);transform: rotate(360deg)}
  }
  @keyframes buildLoading {
      0% {-webkit-transform: rotate(0deg);transform: rotate(0deg)}
      100% {-webkit-transform: rotate(360deg);transform: rotate(360deg)}
  }
</style>
